<template>
	<!-- 视频预览 -->
	<preVideo :show="preVideoShow" :currVideo="currVideo" @close="maskClick"></preVideo>
</template>

<script setup>
import { computed, watch, onMounted, getCurrentInstance, ref, defineEmits } from 'vue';
const { proxy: that } = getCurrentInstance();
let props = defineProps({
	fileObj: {
		type: Boolean,
		default: () => {
			return '';
		}
	}
});

onMounted(() => {});

const emit = defineEmits(['onFileSuccess']);

// const closeFunc = () => {
// 	emit('onSuccess', '');
// };
watch(
	() => props.fileObj,
	(newValue, oldValue) => {
		// console.log(newValue, oldValue, '值变化');
		if (props.fileObj && typeof props.fileObj == 'object') {
			emit('onFileSuccess', '');
			let file = props.fileObj;
			console.log(file);
			if (isImageUrl(file.file_url)) {
				console.log('图片');
				uni.previewImage({
					urls: [file.file_url]
				});
				return;
			}
			if (isVideo(file.file_url)) {
				console.log('视频',file.file_url);
				preVideoShow.value = true;
				currVideo.value = file.file_url;
				return;
			}
			if (isLoockFile(file.file_url)) {
				console.log('可预览文件');
				uni.showLoading({
					mask: true
				});
				uni.downloadFile({
					url: file.file_url,
					success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							fileType: file.file_suffix,
							success: function (res) {
								uni.hideLoading();
								console.log('打开文档成功');
							},
							fail(err) {
								console.log(err);
								uni.hideLoading();
							}
						});
					},
					fail(err) {
						console.log(err);
						uni.hideLoading();
					}
				});
				return;
			}
			console.log('不可预览文件');
			uni.setClipboardData({
				data: file.file_url, //要被复制的内容
				success: () => {
					uni.showModal({
						title: '提示',
						content: '链接复制成功，可前往浏览器下载查看',
						showCancel: false
					});
				}
			});
		}
	}
);
// const statusText = computed(() => {

// });
// 是否图片
function isImageUrl(filename) {
	var imgExtensions = /\.(jpeg|jpg|gif|png|bmp)$/i;
	return imgExtensions.test(filename);
}
// 是否视频
function isVideo(url) {
	console.log(url)
	const videoExtensions = ['mp4', 'webm', 'ogg', 'mov', 'avi', 'flv', 'wmv', '.mkv', '.m4v'];
	const extension = url.split('.').pop().toLowerCase();
	return videoExtensions.includes(extension);
}
// 可查看文件
function isLoockFile(filename) {
	var imgExtensions = /\.(doc|xls|ppt|pdf|docx|xlsx|pptx)$/i;
	return imgExtensions.test(filename);
}
let preVideoShow = ref(false);
let currVideo = ref('');
const maskClick = () => {
	preVideoShow.value = false;
	currVideo.value = '';
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 32rpx;
	width: 100%;
	line-height: 100rpx;
	text-align: center;
}
.btn-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
}
.scroll-view {
	width: 100%;
	max-height: 50vh;
	background-color: #fff;
	// padding: 0 30rpx;
	// box-sizing: border-box;
	.uv-form-box {
		padding: 0 30rpx !important;
	}
	.file-box {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}
	.file-list {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.file-item {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			margin-left: 10rpx;
			padding: 10rpx;
			background-color: #f8f8f8;
			width: 90%;

			.file-name {
				font-size: 24rpx;
				overflow: hidden; /* 确保溢出文本会被隐藏 */
				white-space: nowrap; /* 确保文本在一行内显示 */
				text-overflow: ellipsis; /* 使用省略号显示文本溢出的部分 */
				width: 80%;
			}
		}
		.file-media {
			width: 150rpx;
			height: 150rpx;
			margin: 0 27rpx 22rpx 0;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;
			&:nth-child(4n) {
				margin-right: 0;
			}
			.media-item {
				width: 100%;
				height: 100%;
			}
			.icon-box {
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: rgba(0, 0, 0, 0.6);
				width: 70rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}
			.del-icon {
				width: 60rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
			}
		}
	}
}
</style>
